<template>
	<view class="shop page">
		<view class="items">
			<view @click="toShop(item.id)" class="item" v-for="(item,index) in itemList" :key="index">
				<view class="left">
					<text class="name">{{item.name}}</text>
					<text class="detail">{{item.province}}{{item.city}}{{item.county}}{{item.detail}}</text>
				</view>
				<view class="right">
					<text class="rang" v-if="item.distance">
						{{item.distance}}km
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {shop} from '@/api/home.js'
	import {getDistance} from '@/util/location.js'
	export default {
		onShow(){
			wx.getLocation({
			 type: 'wgs84',
			 success: (res)=> {
			   this.lat = res.latitude
			   this.lng = res.longitude
			 }
			})
			shop().then(res => {
				this.items = res.data.filter(item=>item.status==1)
			})
		},
		methods:{
			calkm(){
				
			},
			toShop(shopId){
				this.$Router.push({
					path:"/pages/sale/out",
					query:{shopId}
				})
			}
		},
		computed:{
			itemList(){
			return	this.items.filter(item => {
					if(this.lat){
						item.distance = (getDistance(this.lat,this.lng,item.lat,item.lng)/1000).toFixed(2)
					}
					return true
				})
			}
		},
		data() {
			return {
				lat:null,
				lng:null,
				items:[]
			}; 
		}
	}
</script>

<style lang="stylus">
	.shop
		padding 0 20upx
		background url(../../static/dbg.png) no-repeat
		background-size 100% 150upx
		background-color #EFEFEF
		.items
			.item
				height 170upx
				background-color white
				display flex
				box-shadow:0px 10px 8px 1px rgba(222,219,219,1);
				margin-top 21upx
				display flex
				align-items center
				.left
					flex 1
					height 80upx
					display flex
					flex-direction column
					padding-left 49upx
					.name
						color #4E3D07
						font-size 28upx
						margin-bottom 10upx
					.detail
						font-size 24upx
						color #A1A1A1
				.right
					border-left 1px solid #A9B1C0
					height 90upx
					width 133upx
					display flex
					align-items center
					justify-content center
					color #A9B1C0
					font-size 24upx
</style>
